<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>弹性布局</title>
	<style type="text/css">
		.fa{
			display: flex;
			/*justify-content: space-between;    等宽排列     */
			/*justify-content: space-evenly;	所有间距都相等*/
			/*justify-content: space-around;		周围的间距都相等*/
			align-items: stretch;
			height: 160px;
			background: pink;
			border: 1px solid #000000;
		}
		.fa div{
			
			width: 30%;
			border: 1px solid #000000;
		}
		.fa div:nth-of-type(2){
			align-self: flex-end;		/*单独给div设置y轴方式*/
		}
	</style>
</head>
<body>
	<div class="fa">
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>
</body>
</html>